<div id="app">
    <admin-page-header>
        <bi-button icon="fa-plus" type="primary" @click="handleEdit()">添加页面</bi-button>
    </admin-page-header>

    <div class="container">
        <div class="row g-2">
            <div class="col-12">
                <bi-card title="搜索">
                    <div class="row g-3">
                        <div class="col-12 col-sm-12 col-lg-12">
                            <bi-input v-model="search.keyword"  placeholder="" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>
            </div>
            <div class="col-12">
                <bi-card title="页面列表">
                    <bi-table :data="list" :loading="loading"  min-height="300" >
                        <!--
                        <bi-table-column name="status" width="30" v-slot="{row}">
                            <bi-icon :data="statusIcon(row.status)" :class="statusClass(row.status)" style="font-size: 16px;"></bi-icon>
                        </bi-table-column>
                        -->
                        <bi-table-column label="ID" name="page_id" width="50"   ></bi-table-column>
                        <bi-table-column label="标识" name="name" width="100" ></bi-table-column>
                        
                        <bi-table-column label="页面名称" name="title" v-slot="{row}" >
                            <div >
                                <b>{{row.title}}</b>
                                <div class="text-muted">{{row.description}}</div>
                            </div>
                        </bi-table-column>
                        <bi-table-column label="创建时间" name="create_time" width="130"></bi-table-column>
                        <bi-table-column label="冷数据" v-slot="{row}" width="100"  >
                            <cold-switch :cold="row.cold" :id="row.page_id" :url="{controller:'admin.page',action:'cold'}"  ></cold-switch>
                        </bi-table-column>
                        <bi-table-column label="操作" width="220" v-slot="{row}">
                           <bi-button type="primary" @click="handleDesign(row)" icon="fa-magic" >设计</bi-button>
                           <bi-button type="primary" @click="handleEdit(row)" :disabled="row.status=='yes'"  >编辑</bi-button>
                           <bi-button type="warning" @click="handleDel(row)"  :disabled="row.status=='yes'"  >删除</bi-button>
                        </bi-table-column>
                    </bi-table>
                    <template #footer>
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>
            </div>
        </div>
    </div>
</div>

<script>
import {debounce} from '@@/admin/assets/js/global.js';
import editDialog from './page/editPageDialog.vue';
import coldSwitch from './field/cold-switch.vue';
let app = admin.createApp({
    components:{
        coldSwitch,
    },
    data(){

        let search  = {
            keyword:'',
        }
        return {
            search,
            list:[],
            loading:false,
            page:1,
            total:0,
            count:0
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                
                this.refresh();
            },1000),
            deep:true
        }       
    },
    methods:{
        refresh(){
            this.loading = true;
            this.$ajax({
                url:this.$url({action:'list'}),
                data:{
                    ...this.search,
                    page:this.page
                },
                success:(res)=>{
                    this.list = res.list;
                    this.total = res.total;
                    this.count = res.count;
                    this.loading = false;
                }
            });
        },
        handleEdit(item){
            let title  = '添加页面';
            if (item)  title  = '编辑页面';
            this.$dialog({
                title,
                type:'vue',
                content:admin.createApp(editDialog,{item}),
                callback:(value)=>{
                   this.refresh();
                }
            })
        },
        handleDel(item){
            this.$confirm('确定要删除模型吗?',()=>{
                this.$ajax({
                    url:this.$url({action:'del'}),
                    data:{
                        page_id:item.page_id
                    },
                    success:(res)=>{
                        this.refresh();
                    }
                })
            })
        },
        handleDesign(item){
            this.$ajax({
                url:this.$url({action:'getDesignId'}),
                data:{
                    page_id:item.page_id
                },
                success:(res)=>{
                    this.$go({action:'design',gets:{id:res.design_id}});
                }
            })
        },
        statusIcon(status){
            switch(status){
                case 'yes':
                    return 'fa-check-circle';
                case 'no':
                    return 'fa-times-circle';
                case 'new':
                    return 'fa-check-circle';
            }
        },
        statusClass(status){
            switch(status){
                case 'yes':
                    return 'text-success';
                case 'no':
                    return 'text-danger';
                default:
                    return 'text-info';
            }
        },
    },
    mounted(){
        this.refresh();
    }
}).mount('#app');
</script>